﻿
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SuperUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	<meta name="author" content="FREEHTML5.CO" />

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">

	<!--link href='http://fonts.useso.com/css?family=Source+Sans+Pro:400,300,600,400italic,700' rel='stylesheet' type='text/css'-->
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Simple Line Icons -->
	<link rel="stylesheet" href="css/simple-line-icons.css">
	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- 
	Default Theme Style 
	You can change the style.css (default color purple) to one of these styles
	
	1. pink.css
	2. blue.css
	3. turquoise.css
	4. orange.css
	5. lightblue.css
	6. brown.css
	7. green.css

	-->
	<link rel="stylesheet" href="css/style.css">

	<!-- Styleswitcher ( This style is for demo purposes only, you may delete this anytime. ) -->
	<link rel="stylesheet" id="theme-switch" href="css/style.css">
	<!-- End demo purposes only -->


	<style>
	body{
		
		font-family: "微软雅黑"!important;
	}
	/* For demo purpose only */
	
	/* For Demo Purposes Only ( You can delete this anytime :-) */
	#colour-variations { display: none;
		padding: 10px;
		-webkit-transition: 0.5s;
	  	-o-transition: 0.5s;
	  	transition: 0.5s;
		width: 140px;
		position: fixed;
		left: 0;
		top: 100px;
		z-index: 999999;
		background: #fff;
		/*border-radius: 4px;*/
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		-webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		-moz-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		-ms-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
	}
	#colour-variations.sleep {
		margin-left: -140px;
	}
	#colour-variations h3 {
		text-align: center;;
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #777;
		margin: 0 0 10px 0;
		padding: 0;;
	}
	#colour-variations ul,
	#colour-variations ul li {
		padding: 0;
		margin: 0;
	}
	#colour-variations li {
		list-style: none;
		display: block;
		margin-bottom: 5px!important;
		float: left;
		width: 100%;
	}
	#colour-variations li a {
		width: 100%;
		position: relative;
		display: block;
		overflow: hidden;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
		-webkit-transition: 0.4s;
		-o-transition: 0.4s;
		transition: 0.4s;
	}
	#colour-variations li a:hover {
	  	opacity: .9;
	}
	#colour-variations li a > span {
		width: 33.33%;
		height: 20px;
		float: left;
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
	}
	

	.option-toggle {
		position: absolute;
		right: 0;
		top: 0;
		margin-top: 5px;
		margin-right: -30px;
		width: 30px;
		height: 30px;
		background: #f64662;
		text-align: center;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		color: #fff;
		cursor: pointer;
		-webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		-moz-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		-ms-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
		box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
	}
	.option-toggle i {
		top: 2px;
		position: relative;
	}
	.option-toggle:hover, .option-toggle:focus, .option-toggle:active {
		color:  #fff;
		text-decoration: none;
		outline: none;
	}
	
	</style>
	<!-- End demo purposes only -->


	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->
<script src="js/Carousel.js"></script>
	</head>
	<body>
	<header role="banner" id="fh5co-header">
			<div class="container">
				<!-- <div class="row"> -->
			    <nav class="navbar navbar-default">
		        <div class="navbar-header">
		        	<!-- Mobile Toggle Menu Button -->
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
		         <a target="_blank" class="navbar-brand" href="http://www.supermgr.cn/">SuperUI</a> 
		        </div>
		        <div id="navbar" class="navbar-collapse collapse">
		          <ul class="nav navbar-nav navbar-right">
		            <li class="active"><a href="#" data-nav-section="home"><span>首页</span></a></li>
		            <li><a href="#" data-nav-section="work"><span>界面展示</span></a></li>
		              <li><a href="#" data-nav-section="services"><span>产品介绍</span></a></li>
                  <li><a href="http://git.oschina.net/tzhsweet/superui/" target="_blank"><span>git源代码</span></a></li>
		          <li><a href="http://bbs.supermgr.cn/"  target="_blank" ><span>SuperUI论坛</span></a></li>
		              <li><a href="#" data-nav-section="contact"><span>联系我门</span></a></li>
		          </ul>
		        </div>
			    </nav>
			  <!-- </div> -->
		  </div>
	</header>

	<section id="fh5co-home" data-section="home" style="background-image: url(images/full_image_2.jpg);" data-stellar-background-ratio="0.5">
		<div class="gradient"></div>
		<div class="container">
			<div class="text-wrap">
				<div class="text-inner">
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<h1 class="to-animate">SuperUI前端框架震撼发布</h1>
							<h2 class="to-animate">让体验变得如此完美、开发变得如此简单<a href="http://www.supermgr.cn/demo/login.html" target="_blank">立即体验</a></h2>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="slant"></div>
	</section>
   
	<section  data-section="work">
		<div class="container" id="fh5co-intro">
			<div class="row row-bottom-padded-lg">
				<div class="fh5co-block to-animate" style="background-image: url(images/img_7.jpg);">
					<div class="overlay-darker"></div>
					<div class="overlay"></div>
					<div class="fh5co-text">
						<i class="fh5co-intro-icon icon-bulb"></i>
						<h2>炫酷炸天的界面</h2>
						<p>SuperUI为您提供了非常炫酷的界面效果，更有六套不同主题可供选择，bootstrap风格炫酷而华丽。</p>
						<!--p><a href="#" class="btn btn-primary">Get In Touch</a></p-->
					</div>
				</div>
				<div class="fh5co-block to-animate" style="background-image: url(images/img_8.jpg);">
					<div class="overlay-darker"></div>
					<div class="overlay"></div>
					<div class="fh5co-text">
						<i class="fh5co-intro-icon icon-wrench"></i>
						<h2>强大丰富的组件库</h2>
						<p>SuperUI为您提供了超过80多个开源通用组件，多达一百多个示例demo。可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率
						</p>
						<!--p><a href="#" class="btn btn-primary">Click Me</a></p-->
					</div>
				</div>
				<div class="fh5co-block to-animate" style="background-image: url(images/img_10.jpg);">
					<div class="overlay-darker"></div>
					<div class="overlay"></div>
					<div class="fh5co-text">
						<i class="fh5co-intro-icon icon-rocket"></i>
						<h2>强大的兼容性</h2>
						<p>SuperUI 支持IE8以上、firefox、chrome等主流PC浏览器，同时也支持各种主流的手机浏览器（微信也能正常支持）！</p>
						<!--p><a href="#" class="btn btn-primary">Why Us?</a></p-->
					</div>
				</div>
			
			</div>
			
		</div>
			
	</section>
	
	<section id="fh5co-work" data-section="work">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<span class="to-animate" style="font-family: '微软雅黑';font-size: 35px;">界面展示</span>
				</div>
				
				
			</div>
		
			<div class="row row-bottom-padded-sm">
				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_200623.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_200623.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>面板</span>
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_200727.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_200727.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">

						<span>按钮</span>
						</div>
					</a>
				</div>

				<div class="clearfix visible-sm-block"></div>

				<div class=" col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_200819.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_200819.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
						<span>树</span>
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_200907.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_200907.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>模态示例</span>
						</div>
					</a>
				</div>
				
				<div class="clearfix visible-sm-block"></div>

				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_201537.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_201537.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>Social图标</span>
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_201205.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_201205.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>表格</span>
						</div>
					</a>
				</div>
				
				<div class="clearfix visible-sm-block"></div>

				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_201525.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_201525.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>图标</span>
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_201306.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_201306.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>动态表格</span>
						</div>
					</a>
				</div>

				<div class="clearfix visible-sm-block"></div>

				<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_202941.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_202941.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>时间轴</span>
						</div>
					</a>
				</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xxs-12">
					<a href="superShot/2016-05-05_201430.png" class="fh5co-project-item image-popup to-animate">
						<img src="superShot/2016-05-05_201430.png" alt="Image" class="img-responsive">
						<div class="fh5co-text">
					<span>饼图</span>
						</div>
					</a>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 text-center to-animate">
					<p>* 去官网了解详细 <a href="http://www.supermgr.cn/demo/login.html" target="_blank">SuperUI</a></p>
				</div>
			</div>
		</div>
	</section>


<section id="fh5co-services" data-section="services">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-left">
					<h2 class=" left-border to-animate">SuperUI超级UI</h2>
					<div class="row">
						<div class="col-md-8 subtext to-animate">
							<h3>专业的团队、华丽的UI、丰富的组件、您的前后台开发的最佳选择。</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-sm-6 fh5co-service to-animate">
					<i class="icon to-animate-2 icon-anchor"></i>
					<h3>组件丰富，扩展强大
</h3>
					<p>大量优秀成熟开源组件，兼容性强，高扩展性。</p>
				</div>
				<div class="col-md-6 col-sm-6 fh5co-service to-animate">
					<i class="icon to-animate-2 icon-layers2"></i>
					<h3>炫酷华丽，风格多样
</h3>
					<p>bootstrap风格UI，华丽而炫酷，组件风格和控制代码分离，风格千变万化！</p>
				</div>

				<div class="clearfix visible-sm-block"></div>

				<div class="col-md-6 col-sm-6 fh5co-service to-animate">
					<i class="icon to-animate-2 icon-video2"></i>
					<h3>各种浏览器，全面兼容
</h3>
					<p>各种PC浏览器（IE8+、chrome、firefox、safari等)，chrome、uc等手机浏览器，微信，全面兼容，极致体验！</p>
				</div>
				<div class="col-md-6 col-sm-6 fh5co-service to-animate">
					<i class="icon to-animate-2 icon-monitor"></i>
					<h3>标准化、组件化</h3>
					<p>遵循html5+css3+js标准，兼容性好、扩展性强。</p>
				</div>
				
			</div>
		</div>
	</section>
	<section id="fh5co-testimonials" data-section="testimonials">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<h2 class="to-animate">我们团队</h2>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 subtext to-animate">
							<h3>行业高精尖人才,经验丰富,技术可靠.</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="box-testimony">
						<blockquote class="to-animate-2">
							<p>&ldquo;一个成功的创业者，三个因素，眼光、胸怀和实力。&ldquo;</p>
						</blockquote>
						<div class="author to-animate">
							<figure><img src="images/lkl.jpg" alt="Person"></figure>
							<p>
							lkl,<a href="#" target="_blank">programmer</a> <span class="subtext">后端工程师</span>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="box-testimony">
						<blockquote class="to-animate-2">
							<p>&ldquo;人之所以不快乐是因为活得不够简单！&ldquo;</p>
						</blockquote>
						<div class="author to-animate">
							<figure><img src="images/tzh_logo.png" alt="Person"></figure>
							<p>
							tzhsweet, <a href="#" target="_blank">programer</a> <span class="subtext">产品经理</span>
							</p>
						</div>
					</div>
				</div>

				<div class="col-md-4">
					<div class="box-testimony">
						<blockquote class="to-animate-2">
							<p>&ldquo;多一点设计,少一堆代码.要把时间花在有意义的事情上&ldquo;</p>
						</blockquote>
						<div class="author to-animate">
							<figure><img src="images/mzb.png" alt="Person"></figure>
							<p>
							hwj,<a href="#" target="_blank">UED</a> <span class="subtext">前端工程师</span>
							</p>
						</div>
					</div>
				</div>
				
				
			</div>
		</div>
	</section>



	
	<!--section data-section="about" id="fh5co-counters" style="background-image: url(images/full_image_1.jpg);" data-stellar-background-ratio="0.5">
		<div class="fh5co-overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center to-animate">
					<h2>产品售价</h2>
				</div>
			</div>
			<div class="row">
			
				<div class="col-md-6 col-sm-6 col-xs-12">
					<div class="fh5co-counter to-animate">
						<i class="fh5co-counter-icon icon-cup to-animate-2"></i>
						<span class="fh5co-counter-number js-counter" data-from="0" data-to="500" data-speed="1500" data-refresh-interval="50"></span>
						<span class="fh5co-counter-label">个人版</span>
					</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<div class="fh5co-counter to-animate">
						<i class="fh5co-counter-icon icon-people to-animate-2"></i>
						<span class="fh5co-counter-number js-counter" data-from="0" data-to="1999" data-speed="1500" data-refresh-interval="50"></span>
						<span class="fh5co-counter-label">企业版</span>
					</div>
				</div>
				
			</div>
		</div>
	</section-->

	<section id="fh5co-contact" data-section="contact" style="max-height: 770px;">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<h2 class="to-animate">联系我们获取SuperUI</h2>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 subtext to-animate">
							<h3>好的产品,你值得拥有</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="row row-bottom-padded-md">
				<div class="col-md-6 to-animate">
					<h3>联系方式</h3>
					<ul class="fh5co-contact-info">
                        <li><i class="icon-phone"></i> 论坛地址:http://bbs.supermgr.cn</li>
                        <li><i class="icon-user"></i>官方交流群:559696533</li>
                        <li><i class="icon-envelope"></i>github地址:http://git.oschina.net/tzhsweet/superui/</li>
					</ul>
				</div>

				<div class="col-md-6 to-animate">
					<div class="col-lg-12">
					<h3>捐赠我们吧</h3></div>
						<div class="col-md-6 to-animate">
							<center>微信</center>
					<div class="form-group ">
							<img class="col-lg-12"  style="max-width: 300px;"  src="images/wxewm.jpg" />	
					</div>
						
						</div>
							<div class="col-md-6 to-animate">
								<center>支付宝</center>
					<div class="form-group ">
						<img class="col-lg-12" style="max-width: 300px;"  src="images/zfbewm.jpg" />		
					</div>
									
							</div>
				
					</div>
				

			</div>
		</div>
		<div id="map" class="to-animate"></div>
	</section>
	
	
	<footer id="footer" role="contentinfo">
		<a title="返回顶部" href="#" class="gotop js-gotop"><i class="icon-arrow-up2"></i></a>
		<div class="container">
			<div class="">
				<div class="col-md-12 text-center">
					<p>&copy; 版权所有 &copy;闪电工作室 2015-2018&nbsp;&nbsp;&nbsp;&nbsp;   粤ICP备16024545号-1  </p>
					
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 text-center">
					<ul class="social social-circle">
						<li><a href="#"><i class="icon-twitter"></i></a></li>
						<li><a href="#"><i class="icon-facebook"></i></a></li>
						<li><a href="#"><i class="icon-youtube"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</footer>
	
	
	<!-- For demo purposes Only ( You may delete this anytime :-) -->
	<div id="colour-variations">
		<a class="option-toggle"><i class="icon-gear"></i></a>
		<h3>Preset Colors</h3>
		<ul>
			<li>
				<a href="javascript: void(0);" data-theme="style">
					<span style="background: #3f95ea;"></span>
					<span style="background: #52d3aa;"></span>
					<span style="background: #f2f2f2;"></span>
				</a>
			</li>
			<li>
				<a href="javascript: void(0);" data-theme="style2">
					<span style="background: #329998;"></span>
					<span style="background: #6cc99c;"></span>
					<span style="background: #f2f2f2;"></span>
				</a>
			</li>
			<li>
				<a href="javascript: void(0);" data-theme="style3">
					<span style="background: #9f466e;"></span>
					<span style="background: #c24d67;"></span>
					<span style="background: #f2f2f2;"></span>
				</a>
			</li>
			<li>
				<a href="javascript: void(0);" data-theme="style4">
					<span style="background: #21825C;"></span>
					<span style="background: #A4D792;"></span>
					<span style="background: #f2f2f2;"></span>
				</a>
			</li>
			
		</ul>
	</div>
	<!-- End demo purposes only -->

	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Stellar Parallax -->
	<script src="js/jquery.stellar.min.js"></script>
	<!-- Counter -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Google Map -->
	<!--script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA&sensor=false"></script-->
	<script src="js/google_map.js"></script>

	<!-- For demo purposes only styleswitcher ( You may delete this anytime ) -->
	<script src="js/jquery.style.switcher.js"></script>
	<script>
		$(function(){
			$('#colour-variations ul').styleSwitcher({
				defaultThemeId: 'theme-switch',
				hasPreview: false,
				cookie: {
		          	expires: 30,
		          	isManagingLoad: true
		      	}
			});	
			$('.option-toggle').click(function() {
				$('#colour-variations').toggleClass('sleep');
			});
		});
	</script>
	<!-- End demo purposes only -->

	<!-- Main JS (Do not remove) -->
	<script src="js/main.js"></script>

	</body>
</html>

